<template>
  <div id="modular2"> 
       <div class="title_box">
             <div class="title_box_yuan bg_color1"></div>
              当前持有
      </div>
      <div style="display:flex;" >
              <div class="con_box">
                   <div class="con_box_item1 bg_color1">
                          <div class="con_box_item_top">持有总数</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                     {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">
                                     {{ datalist[0].holding_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                   {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[1].holding_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                   {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[2].holding_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                   {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[3].holding_count }}
                                </div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color1">
                          <div class="con_box_item_top">对应价值</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                    {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[0].holding_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                    {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[1].holding_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                    {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[2].holding_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                    {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[3].holding_price }}
                                </div>
                            </div>
                    </div>
              </div>
      </div>

         
         <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color1" style="display:flex;">
                          <div class="con_box_item_top" style="flex:1;">预警一</div>
                          <div style="margin-right:50px;"  @click="set_but()">
                            <img class="item_b_1_img"  src="@/assets/images/echarts_tb12.png" style="width:20px;height:20px;margin-top:8px;" />
                          </div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                    {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[0].warning_one }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                    {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[1].warning_one }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                   {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[2].warning_one }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                    {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[3].warning_one }}</div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color1" style="display:flex;">
                          <div class="con_box_item_top" style="flex:1;">预警二</div>
                          <div style="margin-right:50px;"  @click="set_but()">
                            <img class="item_b_1_img"  src="@/assets/images/echarts_tb12.png" style="width:20px;height:20px;margin-top:8px;" />
                          </div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                    {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[0].warning_two }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                    {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[1].warning_two }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                   {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[2].warning_two }}</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                    {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">{{ datalist[3].warning_two }}</div>
                            </div>
                    </div>
              </div>
      </div>

      <div class="title_box">
             <div class="title_box_yuan bg_color2"></div>
              待产出
       </div>
       <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color2">
                          <div class="con_box_item_top">持有总数</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                     {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">
                                     {{ datalist[0].produced_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                   {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[1].produced_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img" :src="urlimg + datalist[2].level_logo" />
                                   {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[2].produced_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                   {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[3].produced_count }}
                                </div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color2">
                          <div class="con_box_item_top">对应价值</div>
                   </div>
                    <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                    {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[0].produced_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                    {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[1].produced_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                    {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[2].produced_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                    {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[3].produced_price }}
                                </div>
                            </div>
                    </div>
              </div>
      </div>
          
          <div class="title_box">
             <div class="title_box_yuan bg_color3"></div>
              产出订单
          </div>
          <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color3">
                          <div class="con_box_item_top">持有总数</div>
                   </div>
                                    <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                     {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">
                                     {{ datalist[0].harvest_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                   {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[1].harvest_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                   {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[2].harvest_count }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                   {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">
                                   {{ datalist[3].harvest_count }}
                                </div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color3">
                          <div class="con_box_item_top">对应价值</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[0].level_logo" />
                                    {{ datalist[0].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[0].harvest_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[1].level_logo" />
                                    {{ datalist[1].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[1].harvest_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[2].level_logo" />
                                    {{ datalist[2].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[2].harvest_price }}
                                </div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  :src="urlimg + datalist[3].level_logo" />
                                    {{ datalist[3].title }}
                                </div>
                                <div class="item_b_2">
                                  {{ datalist[3].harvest_price }}
                                </div>
                            </div>
                    </div>
              </div>
      </div>


       <el-dialog title="预警设置" :visible.sync="mtk"  width="500px" >
          <el-form ref="form"  label-width="100px" style="width:100%;">
                 <el-form-item v-for="(item,index) in zy_datalist" :key="index" :label="item.title" label-width="100px" >
                    <div style="display: flex;">
                        <el-input style="width:150px;" v-model="item.warning_one" placeholder="" @blur="warning(item.warning_one,item.min_price,item.max_price,index,'one')"></el-input>
                        <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                        <el-input  style="width:150px;" v-model="item.warning_two" placeholder="" @blur="warning(item.warning_two,item.min_price,item.max_price,index,'two')"></el-input>
                    </div>
                  </el-form-item> 
                 <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                     <el-button type="primary" class="custom_color_button" style="width:100%;" @click="mtk_but_qr()">确认</el-button>
                 </div>
         </el-form>
   </el-dialog> 

 

   </div>
</template>

<script>

export default {
   name: 'modular2',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
   },
   data () {
    return {
        mtk:false,
        zy_datalist:[],
    }
  },
   components:{

  },
  created(){
  },
  mounted (){
     
  },
  methods: {
     list_zy(){
      this.post("/early_warn/listOfWarningNum", {
       }).then(res => { 
           this.zy_datalist = res.result 
           //console.log(res.result,"zy")       
       })
    },
    set_but(){
       this.list_zy()
       this.mtk = true
    },
    mtk_but_qr(){
      // console.log(this.zy_datalist)    
       this.post("/early_warn/setWarningNum", {
                arr:this.zy_datalist
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.mtk = false
                    this.$emit('up_list_fun')
                    this.list_zy()
                }else {
                this.open1(res.message,'warning')
                }

       })
           
    },
    warning(warning_num,min,max,index,type){
     
      if(parseInt(warning_num)>=parseInt(min) && parseInt(warning_num)<parseInt(max)){
              //console.log(warning_num,min,max)
      }else{
            if(type == 'one'){
                this.zy_datalist[index].warning_one = 0  
            }else if(type == 'two'){
               this.zy_datalist[index].warning_two = 0
            }
            this.open1('请输入区间在'+min+'-'+max,'warning')
      }
           
    },


  }
}
</script>


<style scoped>

.item_b{
  /* flex: 1; */
  float: left;
  width: calc(100%/2);
  margin-top:30px;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}



.con_box{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.con_box:first-child{
  border-right: 2px dashed #F7F7FD;
}
.con_box_item1{
  height: 35px;
  line-height: 35px;
  padding-left: 50px;
  color:white;
}
.bg_color1{
  background-color: #5E62FF;
}
.bg_color2{
  background-color: #FF6B40;
}
.bg_color3{
  background-color: #40ACFF;
}
.con_box_item2{
    padding: 15px;
    height: 200px;
    background-color: #F7F7FD;
}
.con_box_item2>.item_b{
  margin-top: 15px;
}
.title_box{
  display: flex;
   font-size: 16px;
  color: #333333;
    align-items: center;
    margin:15px 0px;
}
.title_box_yuan{
  width: 8px;
  height: 8px;
  border-radius:50%;
  margin-right:10px;
}
</style>